import { GraphicsGroupItem } from "@/config/graphicsGroup.ts";
import React, { useEffect, useState } from "react";
import axios from "@/utils/request.ts";
import { Collapse } from "antd";
import { FolderOutlined } from "@ant-design/icons";
import styles from "@/layout/Graphics/Graphics.module.scss";
import { Glyphs, IconFontResponse } from "@/types";
import { deepClone } from "@meta2d/core";
import localforage from "localforage";

function IconFontCom({ item }: { item: GraphicsGroupItem }) {
  const [response, seResponse] = useState<IconFontResponse>({
    css_prefix_text: "",
    font_family: "",
    description: "",
    glyphs: [],
    id: "",
    name: "",
  });
  const [glyphs, setGlyphs] = useState<Glyphs[]>([]);
  const dragStart = (e: React.MouseEvent<HTMLDivElement>, elem: any) => {
    if (!elem) {
      return;
    }
    e.stopPropagation();
    let pens = [
      {
        name: "image",
        width: 100,
        height: 100,
        iconFamily: response.font_family, // 必须正确设置，具体参考每个字体图标的项目设置
        icon: unescape("%u" + elem.unicode), // 字体图标Unicode编码。必须正确设置，具体参考下面文档
      },
    ];
    if (e instanceof DragEvent) {
      // 设置拖拽数据
      e.dataTransfer?.setData("Meta2d", JSON.stringify(pens));
    } else {
      // 支持单击添加图元。平板模式
      window.meta2d.canvas.addCaches = deepClone(pens);
    }
  };
  useEffect(() => {
    if (item.api) {
      axios.get(item.api).then((r) => {
        seResponse(() => r.data);
        setGlyphs(() => r.data.glyphs);
        localforage.setItem(r.data.font_family, r.data);
      });
    }
  }, []);
  return (
    <>
      <Collapse
        style={{ border: "none", borderRadius: 0, borderColor: "#000000" }}
        expandIconPosition={"end"}
        items={[
          {
            key: "panel",
            label: (
              <>
                <FolderOutlined style={{ marginRight: 5 }} />
                {`${item.key} (${glyphs.length})`}
              </>
            ),
            children: (
              <div className={styles.GraphicsItem}>
                {glyphs.map((_listItem, index) => {
                  return (
                    <div
                      draggable={true}
                      key={_listItem.name + index + ""}
                      title={_listItem.name}
                      className="item"
                      onDragStart={(event) => dragStart(event, _listItem)}
                      onClick={(event) => dragStart(event, _listItem)}
                    >
                      <i
                        className={`icon ${response.font_family} ${
                          response.css_prefix_text + _listItem.font_class
                        }`}
                      ></i>
                    </div>
                  );
                })}
              </div>
            ),
            style: {
              borderRadius: 0,
            },
          },
        ]}
        defaultActiveKey={[]}
      ></Collapse>
    </>
  );
}
export default React.memo(IconFontCom);
